<script setup>
import { computed } from 'vue'

const props = defineProps({
  insideHeight: {
    type: Number,
    default: 0,
  },
  outsideHeight: {
    type: Number,
    default: 0,
  }
})

const theLengthOfTheRulerPx = 279
const theLengthOfTheRulerMM = 2000
// 得到转化后的液位高度
const toPxHeight = (height) => {
  return height * theLengthOfTheRulerPx / theLengthOfTheRulerMM
}

const insidePath = computed(() => {
  return `M0,0L324.8,0L324.8,${toPxHeight(props.insideHeight)}L0,${toPxHeight(props.insideHeight)}L0,0z`
})
const insideTransform = computed(() => {
  return `translate(250.48,${804- (205 + toPxHeight(props.insideHeight))})`
})
const outsidePath = computed(() => {
  return `M0,0L199,0L199,${toPxHeight(props.outsideHeight)}L0,${toPxHeight(props.outsideHeight)}L0,0z`
})
const outsideTransform = computed(() => {
  return `translate(652,${804- (205 + toPxHeight(props.outsideHeight))})`
})
</script>

<template>
  <svg viewBox="0 0 1132 804" height="804" xmlns:ev="http://www.w3.org/2001/xml-events"
       xmlns:xlink="http://www.w3.org/1999/xlink" width="1132" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient y1="0%" x1="0%" id="lg1" x2="0%" y2="100%">
        <stop stop-color="#75a0b1" offset="0"/>
        <stop stop-color="#a8dbf0" offset="0.15"/>
        <stop stop-color="#d2ebf6" offset="0.25"/>
        <stop stop-color="#8bbdd1" offset="0.52"/>
        <stop stop-color="#7ca8ba" offset="0.69"/>
        <stop stop-color="#749eb0" offset="0.8"/>
        <stop stop-color="#6e95a6" offset="0.92"/>
        <stop stop-color="#7facbe" offset="1"/>
      </linearGradient>
    </defs>
    <g transform="translate(5,5)" id="page1">
      <rect x="0" height="794" stroke="#808080" width="1123" fill="#ffffff" y="0"/>
      <path
          d="M0,0L0,389L653,389L653,0L551,0L551,26L627,26L627,363L427,363L427,0L207,0L207,28L351,28L351,363L26,363L26,26L98,26L98,0L0,0z"
          stroke="#385d8a" transform="translate(224,236.8)" id="shape1" fill="#7f7f7f"/>
      <g transform="translate(185.48,450.7)">
        <path d="M0,0L62.9,0L62.9,47.2L0,47.2L0,0z" transform="translate(1.07,2.89)" id="shape2" fill="url(#lg1)"/>
        <path d="M0,0L62.9,0L62.9,47.2L0,47.2L0,0z" transform="translate(1.07,2.89)" fill-opacity="0.36" id="shape3"
              fill="#ffffff"/>
        <path
            d="M.3,0L1.8,0C1.9,0,2,.5,2,1.1L2,51.9C2,52.5,1.9,53,1.8,53L.3,53C.1,53,0,52.5,0,51.9L0,1.1C0,.5,.1,0,.3,0z"
            transform="translate(63.98,0)" id="shape4" fill="url(#lg1)"/>
        <path d="M0,0L62.9,0L62.9,11.3L0,11.3L0,0z" transform="translate(1.07,10.36)" fill-opacity="0.15"
              id="shape5" fill="#ffffff"/>
        <path
            d="M.3,0L1.8,0C1.9,0,2,.5,2,1.1L2,51.9C2,52.5,1.9,53,1.8,53L.3,53C.1,53,0,52.5,0,51.9L0,1.1C0,.5,.1,0,.3,0z"
            id="shape6" fill="url(#lg1)"/>
      </g>
      <g transform="translate(852.48,450.7)">
        <path d="M0,0L62.9,0L62.9,47.2L0,47.2L0,0z" transform="translate(1.07,2.89)" id="shape7" fill="url(#lg1)"/>
        <path d="M0,0L62.9,0L62.9,47.2L0,47.2L0,0z" transform="translate(1.07,2.89)" fill-opacity="0.36" id="shape8"
              fill="#ffffff"/>
        <path
            d="M.3,0L1.8,0C1.9,0,2,.5,2,1.1L2,51.9C2,52.5,1.9,53,1.8,53L.3,53C.1,53,0,52.5,0,51.9L0,1.1C0,.5,.1,0,.3,0z"
            transform="translate(63.98,0)" id="shape9" fill="url(#lg1)"/>
        <path d="M0,0L62.9,0L62.9,11.3L0,11.3L0,0z" transform="translate(1.07,10.36)" fill-opacity="0.15"
              id="shape10" fill="#ffffff"/>
        <path
            d="M.3,0L1.8,0C1.9,0,2,.5,2,1.1L2,51.9C2,52.5,1.9,53,1.8,53L.3,53C.1,53,0,52.5,0,51.9L0,1.1C0,.5,.1,0,.3,0z"
            id="shape11" fill="url(#lg1)"/>
      </g>
      <!--内部液位-->
      <path :d="insidePath" :transform="insideTransform" id="shape12"
            fill="#b0d5f0"/>
      <path d="M0,11.7L11.7,0L11.7,7L68,7L68,16.3L11.7,16.3L11.7,23.3L0,11.7z" stroke="#00b050"
            transform="matrix(-1,0,0,-1,178,488)" id="shape13" fill="#92d050"/>
      <g transform="translate(100.34,435.66)" id="shape14">
        <text class="st1">
          <tspan x="18.2" y="19.7">进水管</tspan>
        </text>
      </g>
      <path d="M0,11.7L11.7,0L11.7,7L68,7L68,16.3L11.7,16.3L11.7,23.3L0,11.7z" stroke="#00b050"
            transform="matrix(-1,0,0,-1,997.7,488)" id="shape15" fill="#92d050"/>
      <g transform="translate(919,435.66)" id="shape16">
        <text class="st1">
          <tspan x="18.2" y="19.7">出水管</tspan>
        </text>
      </g>
      <!--外部液位-->
      <path :d="outsidePath" :transform="outsideTransform" id="shape17" fill="#b0d5f0"/>
      <!--液位标尺 高度279-->
      <path stroke-width="1.6"
            d="M0,0L22.3,0M0,34.9L11.2,34.9M0,69.8L22.3,69.8M0,104.6L11.2,104.6M0,139.5L22.3,139.5M0,174.4L11.2,174.4M0,209.3L22.3,209.3M0,244.1L11.2,244.1M0,279L22.3,279"
            stroke="#000000" transform="matrix(-1,0,0,-1,575.3,599.7)" id="shape18" fill="none"/>
      <g transform="translate(503.33,287)" id="shape19">
        <text class="st2">
          <tspan x="10" y="12">污水液位</tspan>
        </text>
      </g>
      <g transform="translate(503.33,313)" id="shape20">
        <text class="st3">
          <tspan x="16" y="12.5">2000</tspan>
        </text>
      </g>
      <g transform="translate(503.33,381)" id="shape21">
        <text class="st3">
          <tspan x="16" y="12.5">1500</tspan>
        </text>
      </g>
      <g transform="translate(503.33,450.7)" id="shape22">
        <text class="st3">
          <tspan x="16" y="12.5">1000</tspan>
        </text>
      </g>
      <g transform="translate(503.33,520.4)" id="shape23">
        <text class="st3">
          <tspan x="20" y="12.5">500</tspan>
        </text>
      </g>
      <g transform="translate(503.33,590.1)" id="shape24">
        <text class="st3">
          <tspan x="27" y="12.5">0</tspan>
        </text>
      </g>
      <g transform="translate(549,305)" id="shape25">
        <text class="st4">
          <tspan x="10.2" y="10.9">mm</tspan>
        </text>
      </g>
    </g>
  </svg>

</template>

<style scoped>
.st3 {
  fill: #303030;
  font-family: 微软雅黑, serif, sans-serif;
  font-size: 10pt
}

.st4 {
  fill: #303030;
  font-family: 微软雅黑, serif, sans-serif;
  font-size: 8pt
}

.st2 {
  fill: #303030;
  font-family: 微软雅黑, serif, sans-serif;
  font-size: 10pt;
  font-weight: bold
}

.st1 {
  fill: #303030;
  font-family: 微软雅黑, serif, sans-serif;
  font-size: 12pt;
  font-weight: bold
}
</style>
